<template>
  <div>
    <el-table :data="newTableData" style="width: 100%"  :highlight-current-row="true" :stripe="true" size="mini">
      <template v-for="item in tableHeader">
        <el-table-column
          v-if="item.prop !== ''"
          :prop="item.prop"
          :label="item.label">
        </el-table-column>
        <el-table-column
          v-if="item.prop === ''"
          :label="item.label">
          <template scope="scope">
            <el-button @click="listenVoice(scope.row.fileUrl)" type="text" size="small" class="updata">{{$t('config.channel.listenVoice')}}</el-button>
            <el-button type="text" @click="editVoice(scope.row)" size="small">{{$t('public.edit')}}</el-button>
            <br v-if="!isSimpleConfig">
            <span v-if="isSimpleConfig" style="display:inline-block;margin-right:10px;"></span>
            <a class="download" :href="scope.row.fileUrl" target="_blank" download>{{$t('call.downloadAudio')}}</a>
            <el-button type="text" @click="del(scope.row)" size="small" class="del">{{$t('public.delete')}}</el-button>
          </template>
      </el-table-column>
      </template>
    </el-table>
    <el-dialog :close-on-click-modal="false" :title="$t('config.channel.listenVoice')" :visible.sync="showAudioModal" @close="closeAudioDialog">
      <audio-common flagId="audio_library_dialog" :srcUrl="filedUrl" :isShowSubmitAudio="false" :currentObj="{}" :isShowSelect="true" :isConfig="true"></audio-common>
    </el-dialog>
  </div>
</template>
<script>
  import Agent from '@/components/public-modules/cache/Agent'
  import AudioCommon from '@/components/public-modules/audio/audio.vue'
  import {deepClone} from '@/utils/m7Utils'
  export default {
    name: 'WeiboTable',
    data () {
      return {
        showAudioModal: false,
        currentDeleteData: {},
        filedUrl: ''
      }
    },
    props: {
      tableData: Array,
      tableHeader: Array,
      isSimpleConfig: {
        type: Boolean,
        default: function () {
          return false
        }
      }
    },
    computed: {
      newTableData () {
        const origin = window.location.origin
        let _data = deepClone(this.tableData)
        _data.forEach((item, index) => {
          if (!item.IsQiniuMusic || item.IsQiniuMusic !== 'yes') { // 没有转换过的录音地址是相对地址，需要截取一下
            _data[index].fileUrl = origin + item.fileUrl.substring(1)
          }
        })
        return _data || []
      }
    },
    methods: {
      editVoice (val) {
        this.$emit('editVoice', val)
      },
      closeAudioDialog () {
        let dialogAudio = document.getElementById('quality-autoplay_audio_library_dialog')
        if (dialogAudio) { // 关闭窗口时，暂停录音
          dialogAudio.pause()
        }
      },
      listenVoice (fileUrl) {
        this.showAudioModal = true
        this.filedUrl = fileUrl
        let detailAudio = document.getElementById('quality-autoplay_audio_library')
        if (detailAudio) { // 点击试听录音时，详情中的录音暂停
          detailAudio.pause()
        }
      },
      del (val) {
        this.$confirm(this.$t('config.channel.sureDeleteVoiceFile'), this.$t('public.tip'), {
          confirmButtonText: this.$t('public.confirm'),
          cancelButtonText: this.$t('public.cancel'),
          cancelButtonClass: 'primary_btn',
          confirmButtonClass: 'primary_btn',
          type: 'warning'
        }).then(() => {
          this.currentDeleteData = val
          this.deleteSound()
        }).catch(() => {
          console.log('取消')
        })
      },
      deleteSound () {
        let data = {}
        if (this.currentDeleteData) {
          data._id = this.currentDeleteData._id
        }
        data.Account = this.$store.state.session.account.account
        data.PBX = this.currentDeleteData.PBX
        this.$store.dispatch('deleteSound', data).then(resp => {
          if (resp.success) {
            this.$emit('resh', data.PBX)
            this.$message.success(this.$t('sms.successDel'))
          } else {
            this.$message.error(this.$t('sms.failDel'))
          }
        })
      }
    },
    components: {
      Agent,
      AudioCommon
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .updata
    cursor pointer
  .el-table .cell >.el-button--text.del
    color $c-pink
    cursor pointer
  .download
    margin-right 10px
</style>
